
<template>
  <div class="card-edit">
    <!-- 卡片 -->
    <div class="card-container " :style="pos">
      <card :initProp="initProp" />
    </div>
    <!-- 配置 -->
    <div class="panel-conatiner">
      <panel :initProp="initProp" />
    </div>
  </div>
</template>
<script setup>
import card from './cards/image/card.vue'
import panel from './cards/image/panel/panel.vue'
import cardJson from './cards/image/card.json'
import { reactive } from 'vue'
// 卡片位置大小
const pos = reactive({
  top: '100px',
  left: '100px',
  width: '500px',
  height: '400px'
})
// 配置属性
const initProp = reactive(cardJson.initProp)
</script>
<style lang="less">
.card-container {
  position: absolute;
  box-shadow: var(--el-box-shadow-lighter);
}

.panel-conatiner {
  position: fixed;
  top: 0;
  right: 0;
  width: 330px;
  height: 100vh;
  border-left: 1px solid #ddd;
  padding: 10px;
  box-shadow: border-box;
  background-color: #fff;
}
</style>